<!--个人中心左边导航栏-->
<template>

    <el-menu :default-active="activeIndex" :active-text-color="'#67C23A'" class="el-menu-vertical-demo"
        @select="handleSelect">
        <el-sub-menu index="1">
            <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>我的信息</span>
            </template>

            <el-menu-item-group>
                <el-menu-item index="1-1" @click="UserInfoClick">
                    <el-icon><InfoFilled /></el-icon>
                    基本信息
                </el-menu-item>

                <el-menu-item index="1-2" v-if="store.getters.isExpert" @click="handleExperInfo">
                    <el-icon><Document /></el-icon>
                    专家信息
                </el-menu-item>

                <el-menu-item index="1-3" @click="UserPasswordClick">
                    <el-icon><MoreFilled /></el-icon>
                    修改密码
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2" v-if="!store.getters.isExpert && !store.getters.isAdmin">
            <template #title>
                <el-icon><Checked /></el-icon>
                <span>我的发布</span>
            </template>

            <el-menu-item-group>
                <el-menu-item index="2-1" @click="PublishedGoodsClick">
                    <el-icon><Goods /></el-icon>
                    我的商品
                </el-menu-item>

                <el-menu-item index="2-2" @click="PublishedNeedsClick">
                    <el-icon><Sell /></el-icon>
                    我的需求
                </el-menu-item>

            </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="4" v-if="!store.getters.isAdmin">
            <template #title>
                <el-icon><List /></el-icon>
                <span>专家管理</span>
            </template>

            <el-menu-item-group>
                <el-menu-item index="4-1" @click="handleExpertQuestion">
                    <el-icon><ChatDotRound /></el-icon>
                    我的问答
                </el-menu-item>

                <el-menu-item index="4-2" @click="handleExpertAppoint">
                    <el-icon><HelpFilled /></el-icon>
                    我的预约
                </el-menu-item>

                <!-- 只有专家有该模块权限 -->
                <el-menu-item index="4-3" v-if="store.getters.isExpert" @click="PublishedKnowledgesClick">
                    <el-icon><MagicStick /></el-icon>
                    我的知识
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="3" v-if="!store.getters.isExpert && !store.getters.isAdmin">
            <template #title>
                <el-icon><BellFilled /></el-icon>
                <span>我的订单</span>
            </template>

            <el-menu-item-group>
                <el-menu-item index="3-1" @click="UserBuyClick">
                    <el-icon><DishDot /></el-icon>
                    我买的
                </el-menu-item>

                <el-menu-item index="3-2" @click="UserSellClick">
                    <el-icon><Fries /></el-icon>
                    我卖的
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>

        <el-menu-item index="9" v-if="!store.getters.isExpert && !store.getters.isAdmin" @click="UserFinance">
            <template #title>
                <el-icon><CreditCard /></el-icon>
                <span>我的融资</span>
            </template>
        </el-menu-item>

        <el-menu-item index="5" v-if="store.getters.isAdmin" @click="UserManageClick">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
        </el-menu-item>
    </el-menu>

</template>


<script setup lang="ts">
import { ref } from "vue";
import store from "@/store";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const activeIndex = ref(route.path);

const handleSelect = (key: string, keyPath: string[]) => {
    activeIndex.value = key
}


//基本信息
const UserInfoClick = () => {
    router.push("/index/user/user_info").catch((err) => err);
}

//专家信息
const handleExperInfo = () => {
    router.push("/index/user/user_expert_info").catch((err) => err);
}

//收货地址
const UserAddressClick = () => {
    router.push("/index/user/user_address").catch((err) => err);
}

//修改密码
const UserPasswordClick = () => {
    router.push("/index/user/user_password").catch((err) => err);
}

//我的商品
const PublishedGoodsClick = () => {
    router.push("/index/user/publishedgoods").catch((err) => err);
}

//我的需求
const PublishedNeedsClick = () => {
    router.push("/index/user/publishedneeds").catch((err) => err);
}

//我的问答
const handleExpertQuestion=()=>{
    router.push("/index/user/expertQuestion").catch((err) => err);
}

//我的预约
const handleExpertAppoint=()=>{
    router.push("/index/user/expertAppoint").catch((err) => err);
}

//我的知识
const PublishedKnowledgesClick=()=>{
    router.push("/index/user/publishedknowledges").catch((err) => err);
}

//UserBuyClick
const UserBuyClick=()=>{
    router.push("/index/user/user_buy").catch((err) => err);
}

//UserSellClick
const UserSellClick=()=>{
    router.push("/index/user/user_sell").catch((err) => err);
}

//UserManageClick
const UserManageClick=()=>{
    router.push("/index/user/user_manager").catch((err) => err);
}


//UserFinance
const UserFinance=()=>{
    router.push("/index/user/user_finance").catch((err) => err);
}

</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {

    width: 200px;
    background-color: #ffffff;

}
</style>